<template>
    <div class="FormHeader-Container flex align-center  bg-white   px-4">
        <div class="left">
           <a-space>
            <a-button  type="primary" ghost>新建</a-button>
            <a-button  danger >删除</a-button>
           </a-space>
        </div>
        <div class="content flex justify-center ">

        </div>
        <div class="right flex justify-end">
            <a-space>
                <a-button type="primary">保存</a-button>
                <a-button type="primary">发布</a-button>
            </a-space>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue'

</script>
<style lang="less" scoped>
.FormHeader-Container {
    width: 100vw;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0px 6px 12px 2px rgba(122, 122, 122, 0.3);

    .left {
        width: 20%;
    }

    .content {
        width: 50%;
        height: 100%;
    }

    .right {
        width: 30%;
    }
}
</style>